<!DOCTYPE html>
<html>
  <head>
    <title>我画我猜</title>
    <style>
      body {
        margin: 0;
        padding-bottom: 3rem;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
      }

      .box-body {
        display: flex;
        height: 91vh;
      }

      .box-left {
        flex: 1;
        background: floralwhite;
        border-radius: 20px;
        margin: 1rem;
        display: flex;
        flex-direction: column;
        z-index: 20;
      }

      .left-top {
        flex: 1;
      }

      .left-bottom {
        flex: 2;
        margin: 2rem;
        border-radius: 20px;
        background-color: white;
        overflow-y: scroll;
      }

      .box-right {
        flex: 2;
        background-color: #f7f4f0;
        cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/605067/cursor.png"), auto;
        font-family: "Galano Grotesque Semi Bold";
        margin: 0;
        overflow: hidden;
      }

      button {
        font-family: "Galano Grotesque Semi Bold";
      }

      .colours {
        bottom: 5rem;
        left: 50%;
        list-style-type: none;
        padding-left: 0;
        position: absolute;
        transform: translateX(-50%);
        z-index: 10;
        display: inline-block;
      }
      @media (min-width: 1024px) {
        .colours {
          display: flex;
        }
      }
      .colours li {
        border-radius: 50%;
        display: inline-block;
        height: 14px;
        margin: 0 12px;
        width: 14px;
      }
      .colours li:nth-child(1) {
        background-color: #100c08;
      }
      .colours li:nth-child(2) {
        background-color: #759BA9;
      }
      .colours li:nth-child(3) {
        background-color: #77dd77;
      }
      .colours li:nth-child(4) {
        background-color: #ff6961;
      }
      .colours li:nth-child(5) {
        background-color: #ffd1dc;
      }

      .pencil__border {
        pointer-events: none;
        position: relative;
        z-index: 3;
        height: 80%;
      }
      .pencil__border div:nth-child(1), .pencil__border div:nth-child(2) {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
      .pencil__border div:nth-child(1):before, .pencil__border div:nth-child(1):after, .pencil__border div:nth-child(2):before, .pencil__border div:nth-child(2):after {
        background-color: #FFFFFF;
        content: "";
        opacity: 0.98;
        position: absolute;
      }
      .pencil__border div:nth-child(1):before {
        height: 20px;
        left: 20px;
        top: 0;
        width: 100%;
      }
      @media (min-width: 1024px) {
        .pencil__border div:nth-child(1):before {
          height: 60px;
          left: 55px;
        }
      }
      .pencil__border div:nth-child(1):after {
        bottom: 60px;
        height: 100%;
        left: 0;
        width: 20px;
      }
      @media (min-width: 1024px) {
        .pencil__border div:nth-child(1):after {
          bottom: 80px;
          width: 55px;
        }
      }
      .pencil__border div:nth-child(2):before {
        bottom: 0;
        right: 20px;
        height: 60px;
        width: 100%;
      }
      @media (min-width: 1024px) {
        .pencil__border div:nth-child(2):before {
          height: 80px;
          right: 55px;
        }
      }
      .pencil__border div:nth-child(2):after {
        bottom: 0;
        height: 100%;
        right: 0;
        width: 20px;
      }
      @media (min-width: 1024px) {
        .pencil__border div:nth-child(2):after {
          width: 55px;
        }
      }

      .pencil__border-inner {
        border: solid 1px #f7f4f0;
        box-shadow: 2px 2px 10px #00000050;
        border-width: 2px;
        border-radius: 10px;
        border-style: solid;
        bottom: 58px;
        left: 19px;
        position: absolute;
        right: 19px;
        top: 19px;
      }
      @media (min-width: 1024px) {
        .pencil__border-inner {
          bottom: 78px;
          left: 54px;
          right: 54px;
          top: 58px;
        }
      }

      .pencil__refresh {
        background-color: #f0d6d0;
      }

      .pencil__submit {
        transform: translateX(120%);
      }

      .btn {
        border-radius: 10px;
        border: none;
        cursor: pointer;
        font-size: 13px;
        letter-spacing: 0.15em;
        outline: none;
        padding: 5px 10px;
        text-transform: uppercase;
        user-select: none;
        z-index: 3;
        font-weight: bold;
        position: absolute;
        text-align: center;
        cursor: pointer;
        width: 6rem;
        -moz-user-select: none;
      }

      #list span {
        display: inline-block;
        text-align: center;
        width: 100%;
        color: gray;
        border-bottom: 2px solid #00000000;
      }

      #list span:hover {
        cursor: pointer;
        border-bottom: 2px solid #ffd1dc;
      }

      #count {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
        color: lightblue;
        text-align: center;
      }

      #form {
        background: rgba(0, 0, 0, 0.15);
        padding: 0.25rem;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        height: 3rem;
        box-sizing: border-box;
        backdrop-filter: blur(10px);
        z-index: 21;
      }

      #input {
        border: none;
        padding: 0 1rem;
        flex-grow: 1;
        border-radius: 2rem;
        margin: 0.25rem;
      }

      #input:focus {
        outline: none;
      }

      #form > button {
        background: #333;
        border: none;
        padding: 0 1rem;
        margin: 0.25rem;
        border-radius: 3px;
        outline: none;
        color: #fff;
      }

      #messages {
        list-style-type: none;
        border: 1px solid #f4f3ef;
        margin: 0 auto;
        padding: 0;
      }

      #messages > li {
        padding: 0.5rem 1rem;
      }

      #messages > li:nth-child(odd) {
        background: #efefef;
      }
    </style>
  </head>

  <body>
    <div class="box-body">
      <div class="box-left">
        <div id="users" class="left-top">
          <h3 id="count">online: 0</h3>
          <div id="list">
            <span>Jack</span>
          </div>
          <div>
            <!-- <button onclick="joinDraw()">Join Draw</button>
            <button onclick="leaveDraw()">Leave Draw</button> -->
          </div>
        </div>
        <div class="left-bottom">
          <ul id="messages"></ul>
        </div>
      </div>
      <div class="box-right">
        <ul class="colours">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li>
            <button class="pencil__refresh btn">刷新</button>
            <button class="pencil__submit btn">保存PNG</button>
          </li>
        </ul>
        <div class="pencil__border">
          <div></div>
          <div></div>
          <div class="pencil__border-inner"></div>
        </div>
      </div>
    </div>
    <form id="form" action="">
      <input id="input" autocomplete="off" />
      <button>Send</button>
    </form>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
  <script>
    const browser = getBrowser()

    function getBrowser () {
      const browser = {
        msie: false,
        firefox: false,
        opera: false,
        safari: false,
        chrome: false,
        netscape: false,
        appname: 'unknown',
        version: 0
      }
      const ua = window.navigator.userAgent.toLowerCase()
      if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test(ua)) {
        browser[RegExp.$1] = true
        browser.appname = RegExp.$1
        browser.version = RegExp.$2
      } else if (/version\D+(\d[\d.]*).*safari/.test(ua)) {
        // safari
        browser.safari = true
        browser.appname = 'safari'
        browser.version = RegExp.$2
      }
      return browser.appname + ' ' + browser.version
    }

    const socket = io()
    const messages = document.getElementById('messages')
    const form = document.getElementById('form')
    const input = document.getElementById('input')
    const usersDiv = document.getElementById('users')
    const usersList = document.getElementById('list')
    const usersCount = document.getElementById('count')
    const id = browser
    const name = browser + '[' + returnCitySN.cip + ']'

    // 进页面加入聊天室
    socket.emit('join chat', {
      userid: id,
      username: name
    })

    // 加入绘画房
    function joinDraw () {
      socket.emit('join draw', {
        userid: id,
        username: name
      })
    }

    // 离开绘画房
    function leaveDraw () {
      socket.emit('leave draw', name)
    }

    // 收到有新的人加入房间的信息
    socket.on('draw_system', function (data) {
      usersCount.textContent = '绘画房: ' + data.count + '人'
      const users = data.users
      usersList.textContent = ''
      for (const u in users) {
        usersList.innerHTML += '<span>' + users[u] + '</span>'
      }
      alert(data.message)
    })
    // 收到我离开的信息
    socket.on('leaveyou', function (data) {
      usersCount.textContent = 'online: 0'
      usersList.textContent = ''
      alert(data)
    })

    form.addEventListener('submit', function (e) {
      e.preventDefault()
      if (input.value) {
        socket.emit('message', {
          username: name,
          content: input.value
        })
        input.value = ''
      }
    })
    socket.on('message', function (msg) {
      const item = document.createElement('li')
      item.textContent = msg.username + ': ' + msg.content
      messages.appendChild(item)
      window.scrollTo(0, document.body.scrollHeight)
    })
    socket.on('chat_system', function (msg) {
      usersCount.textContent = 'online: ' + msg.onlineCount
      const users = msg.onlineUsers
      usersList.textContent = ''
      for (const u in users) {
        usersList.innerHTML += '<span>' + users[u] + '</span>'
      }
    })
  </script>
  <script src="../../../static/js/draw/three.js"></script>
  <script src="../../../static/js/draw/MTLLoader.js"></script>
  <script src="../../../static/js/draw/OBJLoader.js"></script>
  <script src="../../../static/js/draw/script.js"></script>
</html>
